<template>
  <div class="newsinfo-container">
    <!-- 大标题 -->
    <h3 class="title">{{ newsinfo.title }}</h3>
    <!-- 小标题 -->
    <p class="subtitle">
      <span>发表时间: {{ newsinfo.add_time | dateFormat }}</span>
      <span>点击：{{ newsinfo.click }}次</span>
    </p>
    <hr />
    <!-- 内容区 -->
    <!-- newsinfo.content的内容带标签，内容中的图片信息不可访问了  -->
    <div class="content" v-html="newsinfo.content"></div>
    <!-- 评论区 -->
    <comment-box :id="this.id"></comment-box>
  </div>
</template>

<script>
// 导入评论子组件
import comment from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      // $route是一个跳转的路由对象，每一个路由都会有一个route对象，
      // 是一个局部的对象，可以获取对应的name,path,params,query等
      id: this.$route.params.id, //将URL地址中传递过来的id值挂载到data上，方便以后调用
      newsinfo: {},
    };
  },
  created() {
    this.getNewsInfo();
  },
  methods: {
    getNewsInfo() {
      // 获取新闻详情     /api/getnews/:newsid
      this.$http.get("api/getnew/" + this.id).then((result) => {
        if (result.body.status === 0) {
          this.newsinfo = result.body.message[0];
          if (this.newsinfo.id === 15) {
            this.newsinfo.content =
              "<img src='https://www.wzvtc.cn/Themes/wzvtc/images/ztgs.jpg?1597297613703'/>" +
              this.newsinfo.content;
          }
        } else {
          Toast("获取新闻详情失败！");
        }
      });
    },
  },
  components: {
    //注册子组件的结点
    "comment-box": comment,
  },
};
</script>

<style lang="scss">
.newsinfo-container {
  padding: 0 4px;
  .title {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: red;
  }
  .subtitle {
    font-size: 13px;
    color: 226aff;
    display: flex;
    justify-content: space-between;
  }
  .content {
    img {
      width: 100%;
    }
  }
}
</style>